import React from 'react';
import cx from 'classnames';
import styles from '../styles/form/text';

export default React.createClass({

    getInitialState: function() {
        return {
            errMsg: null,
            value: this.props.defaultValue || '',
        };
    },

    propTypes: {
        name: React.PropTypes.string.isRequired,
        placeholder: React.PropTypes.string,
        label: React.PropTypes.string,
        defaultValue: React.PropTypes.string,
        regex: React.PropTypes.instanceOf(RegExp),
        isRequired: React.PropTypes.bool,
        classNames: React.PropTypes.string,
        onChange: React.PropTypes.func,
        onValid: React.PropTypes.func,
        type: React.PropTypes.string,
        disabled: React.PropTypes.bool,
        maxInput: React.PropTypes.number,
        minInput: React.PropTypes.number,
        icon: React.PropTypes.string,
        callback: React.PropTypes.func,
    },

    componentWillReceiveProps: function(nextProps) {
        if(nextProps.defaultValue !== null && nextProps.defaultValue !== undefined){
            this.setState({value: nextProps.defaultValue});
        }
    },

    render: function() {

        const placeholder = this.props.placeholder ? this.props.placeholder : this.props.label;
        if(this.props.type === "textarea") {
            return (
                <div className={cx("form-group", this.props.classNames, cx({'has-error': this.state.errMsg}))}>
                    <textarea type={this.props.type || "text"} maxLength={this.props.maxLength||""} ref="input" placeholder={placeholder} className="form-control textarea" value={this.state.value} onChange={this.change} onFocus={this.resetError} onBlur={this.blur}></textarea>
                    <div className={cx("error-message", cx({'hide': !this.state.errMsg}))}>{this.state.errMsg}</div>
                </div>
            );
        }
        if(this.props.type === "hidden") {
            return (
                <div className="form-group hidden">
                    <input type="hidden" ref="input" placeholder={placeholder} value={this.state.value} onChange={this.change} onFocus={this.resetError} disabled={this.props.disabled} onBlur={this.blur} />
                </div>
            );
        }

        if (this.props.classNames && this.props.classNames === 'isSelectInput') {
            return (
                <div>
                    <div className={cx("item-input", this.props.classNames, cx({'has-error': this.state.errMsg}))}>
                        <span className="input-label">{this.props.label}<a className="right" onClick={this.props.callback}>请选择</a></span>
                        <input type={this.props.type || "text"} maxLength={this.props.maxLength||""} ref="input" placeholder={placeholder} value={this.state.value} onChange={this.change} onFocus={this.resetError} disabled={this.props.disabled} onBlur={this.blur} />
                    </div>
                    <div className={cx("error-message", cx({'hide': !this.state.errMsg}))}>{this.state.errMsg}</div>
                </div>
            )
        }
        if(this.props.icon) {
            let eyeIcon = '<i class="iconfont size18">'+this.props.icon+'</i>'
            return (
                <div>
                    <div className={cx("item-input", this.props.classNames, cx({'has-error': this.state.errMsg}))}>
                        <span className="input-label"><span dangerouslySetInnerHTML={{__html: eyeIcon }} /></span>
                        <input  type={this.props.type || "text"} maxLength={this.props.maxLength||""} ref="input" placeholder={placeholder} value={this.state.value} onChange={this.change} onFocus={this.resetError} disabled={this.props.disabled} onBlur={this.blur} />
                    </div>
                    <div className={cx("error-message", cx({'hide': !this.state.errMsg}))}>{this.state.errMsg}</div>
                </div>
            );
        }
        return (
            <div>
                <div className={cx("item-input", this.props.classNames, cx({'has-error': this.state.errMsg}))}>
                    <span className="input-label">{this.props.label}</span>
                    <input type={this.props.type || "text"} maxLength={this.props.maxLength||""} ref="input" placeholder={placeholder} value={this.state.value} onChange={this.change} onFocus={this.resetError} disabled={this.props.disabled} onBlur={this.blur} />
                </div>
                <div className={cx("error-message", cx({'hide': !this.state.errMsg}))}>{this.state.errMsg}</div>
            </div>
        );
    },

    change: function(e){
        const value = e.target.value;
        this.setState({value: value});
        if(this.props.onChange && typeof this.props.onChange === "function"){
            if (this.props.name.indexOf('filed' > -1)) {
                this.props.onChange(value, this.props.name);
            }else {
                this.props.onChange(value);
            }
        };
    },

    blur: function(e){
        const value = e.target.value;
        this.setState({value: value});
        if(this.props.onValid && typeof this.props.onValid === "function" && this.props.isRequired) {
            const message = this.props.onValid(value);
            this.setState({errMsg: message});
        };
    },

    resetError: function() {
        this.setState({errMsg: null});
    },

    getValue: function() {
        const value = this.state.value;
        if((!value || !value.trim()) && this.props.isRequired){
        	if (this.props.onValid && typeof this.props.onValid === "function") {
        		return this.setState({'errMsg': this.props.onValid(value)});
        	}else{
        		let lb = this.props.label.replace(/：/g,"")
        		return this.setState({'errMsg': '请填写' + lb});
        	}
        }
        if(value && this.props.regex && !this.props.regex.test(value)) return this.setState({'errMsg': this.props.label + '格式错误'});
        if(value && this.props.minInput && this.props.minInput > value) return this.setState({'errMsg': '金额不得少于' + this.props.minInput + '元'});
        if(value && this.props.maxInput && this.props.maxInput < value) return this.setState({'errMsg': '金额不得大于' + this.props.maxInput + '元'});
        if(this.state.errMsg) return null;
        if(this.props.onValid){
            const message = this.props.onValid(value);
            if(message) return this.setState({errMsg: message});
        }
        return value;
    },

    clear: function() {
        this.setState({value: '',errMsg:''});
    }

})
